@import '../../less/index.less';

.cate {
    .con {
        margin-top: @headerHeight;
        height: calc(100vh - @headerHeight - @footerHeight );
        display: flex;

        .left {
            width: 2rem;
            overflow-y: auto;
            border-right: 0.01rem solid @border-color;

            div {
                text-align: center;
                font-size: 0.26rem;
                line-height: 0.8rem;
                color: @font-color3;
                transition: all 0.3s;
            }

            .active {
                background: @primary;
                color: @white;
            }
        }

        .right {
            flex: 1;
            overflow-y: auto;
            background: @border-color;

            .item {
                margin: @margin20;
                background: #fff;

                h3 {
                    font-size: 0.36rem;
                    color: @font-color3;
                    margin: @margin20;
                }

                .item-con {
                    overflow: hidden;

                    .item-every {
                        width: 100%;
                        float: left;
                        display: flex;
                        margin-bottom: .5rem;

                        img {
                            flex: 1;
                            width: .8rem;
                            height: 1rem;
                            border-radius: 50%;
                        }

                        .item-every-r {
                            flex: 3;
                            div {
                                line-height: 0.6rem;
                                font-size: 0.3rem;
                                color: @font-color6;
                            }
                        }

                    }
                }
            }
        }
    }
}